<template>
  <div class="kuang3">
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <div class="p3oneContent">
          <div class="p3onetitleTop">部队人员分布</div>
          <div
            class="p3onecontent2"
            id="p3T1"
            style="width: 1380px; height: 450px"
          ></div>
        </div>
      </el-col>
      <el-col :span="12" :offset="0">
        <div class="p3oneContent">
          <div class="p3onetitleTopDuan">部队军种占比情况</div>
          <div
            class="p3onecontent2"
            id="p3T2"
            style="width: 680px; height: 430px"
          ></div>
        </div>
      </el-col>
      <!-- <el-col :span="12" :offset="0">
        <div class="p3oneContent">
          <div class="p3onetitleTopDuan">固定资产统计</div>
          <div
            class="p3onecontent2"
            id="p3T3"
            style="width: 620px; height: 400px"
          >
            <div class="table-kuang">
              <el-table
                :data="tableData"
                style="width: 100%"
                id="playList"
              >
                <el-table-column
                  prop="date"
                  label="日期"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="预警信息"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="预警类别">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-col> -->
      <el-col :span="12" :offset="0">
        <div class="p3oneContent">
          <div class="p3onetitleTopDuan">数据上报完整性</div>
          <div
            class="p3onecontent2"
            id="p3T3"
            style="width: 680px; height: 430px"
          ></div>
        </div>
      </el-col>
      <el-col :span="24" :offset="0">
        <div class="p3oneContent">
          <div class="p3onetitleTop">采购数量统计</div>
          <div
            class="p3onecontent2"
            id="p3T4"
            style="width: 1380px; height: 400px"
          ></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  ame: "Part3",
  components: {
    // CommonAside: ()=> import('../components/CommonAside.vue'),
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "就餐人数预警",
          address: "一类预警",
        },
        {
          date: "2016-05-04",
          name: "早餐预警",
          address: "二类预警",
        },
        {
          date: "2016-05-01",
          name: "午餐预警",
          address: "三类预警",
        },
        {
          date: "2016-05-03",
          name: "晚餐预警",
          address: "普通预警",
        },
        {
          date: "2016-05-03",
          name: "晚餐预警",
          address: "普通预警",
        },
        {
          date: "2016-05-03",
          name: "晚餐预警",
          address: "普通预警",
        },
      ],
      p1t1Data: [70, 34, 60, 78, 69],
    };
  },
  mounted() {
    this.p3T1();
    this.p3T2();
    this.p3T3();
    // 去除el 表格hover
    window.addEventListener("click", this.closeBarcode);
    if (document.getElementById("playList")) {
      this.timer = setInterval(() => {
        // （也可以使用`this.$ref`获得表格元素让母后`.classList.remove("el-table--enable-row-hover")`）
        document
          .getElementById("playList")
          .classList.remove("el-table--enable-row-hover");
      });
    }
    this.p3T4();
    this.reduceTest();
  },

  destroyed() {
    window.removeEventListener("click", this.closeBarcode);
    if (this.timer) {
      //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
  },

  methods: {
    // 第一个图
    p3T1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("p3T1"));

      var data = this.p1t1Data;
      var titlename = [
        "北部战区",
        "南部战区",
        "东部战区",
        "西部战区",
        "中部战区",
      ];
      var valdata = [683, 234, 234, 523, 345];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];

      // 绘制图表
      myChart.setOption({
        //你的代码

        // backgroundColor: "#0e2147",
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                return [
                  "{lg|" + (index + 1) + "}" + "{title|" + value + "} ",
                ].join("\n");
              },
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  // padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
              textStyle: {
                fontSize: 22,
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 22,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: 30,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 40,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      });
    },

    // 第二个图
    p3T2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("p3T2"));

      var img =
        "";

      var trafficWay = [
        {
          name: "陆军",
          value: 20,
        },
        {
          name: "海军",
          value: 10,
        },
        {
          name: "空军",
          value: 20,
        },
        {
          name: "火箭军",
          value: 10,
        },
        {
          name: "战略支援",
          value: 30,
        },
        {
          name: "特种兵",
          value: 40,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [135, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                fontSize: 18,
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return "" + params.name + "\n" + "\n" + "" + percent + "%";
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 50,
                show: true,
                color: "#00ffff",
              },
            },
          },
          data: data,
        },
      ];

      // 绘制图表
      myChart.setOption({
        //你的代码

        // backgroundColor: '#013A54',
        color: color,
        title: {
          text: "部队军种占比情况",
          top: "85%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 18,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["陆军", "海军", "空军", "火箭军", "战略支援", "特种兵"],
          right: 60,
          bottom: 0,
          align: "right",
          textStyle: {
            color: "#fff",
            fontSize: 18,
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      });
    },

    // 第三个雷达地图
    p3T3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById("p3T3"));

      // 绘制图表
      myChart2.setOption({
        //你的代码

        // backgroundColor: "#0A2E5D",
        normal: {
          top: 200,
          left: 300,
          width: 500,
          height: 400,
          zIndex: 6,
          backgroundColor: "",
        },
        color: ["rgba(245, 166, 35, 1)", "rgba(19, 173, 255, 1)"],
        title: {
          show: true,
          text: "数据上报完整性",
          left: "40%",
          top: "1%",
          textStyle: {
            fontSize: 18,
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: true,
          icon: "circle",
          left: "35%",
          top: "90%",
          orient: "horizontal",
          textStyle: {
            fontSize: 14,
            color: "#fff",
          },
          data: ["北部战区", "南部战区"],
        },
        radar: {
          center: ["50%", "50%"],
          radius: "70%",
          startAngle: 90,
          splitNumber: 4,
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          axisLabel: {
            show: false,
            fontSize: 18,
            color: "#fff",
            fontStyle: "normal",
            fontWeight: "normal",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "white", //
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "white", //
            },
          },
          indicator: [
            {
              name: "半天的完成度",
              max: 88,
            },
            {
              name: "全天的完成度",
              max: 88,
            },
            {
              name: "半周的完成度",
              max: 88,
            },
            {
              name: "一周的完成度",
              max: 88,
            },
            {
              name: "一个月的完成度",
              max: 88,
            },
            {
              name: "一个季度的完成度",
              max: 88,
            },
            {
              name: "半年的完成度",
              max: 88,
            },
            {
              name: "一年的完成度",
              max: 88,
            },
          ],
        },
        series: [
          {
            name: "北部战区",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: "rgba(245, 166, 35, 0.4)",
              },
            },
            itemStyle: {
              color: "rgba(245, 166, 35, 1)",
              borderColor: "rgba(245, 166, 35, 0.3)",
              borderWidth: 10,
            },
            lineStyle: {
              normal: {
                type: "dashed",

                color: "rgba(245, 166, 35, 1)",
                width: 2,
              },
            },
            data: [[80, 50, 55, 80, 50, 80, 48, 43]],
          },
          {
            name: "南部战区",
            type: "radar",
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                borderColor: "rgba(19, 173, 255, 0.4)",
                borderWidth: 10,
              },
            },
            areaStyle: {
              normal: {
                color: "rgba(19, 173, 255, 0.5)",
              },
            },
            lineStyle: {
              normal: {
                color: "rgba(19, 173, 255, 1)",
                width: 2,
                type: "dashed",
              },
            },
            data: [[60, 60, 65, 60, 70, 40, 80, 63]],
          },
        ],
      });
    },

    // 第三个柱状图
    p3T4() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("p3T4"));

      var xData = (function () {
        var data = [];
        for (var i = 1; i < 14; i++) {
          data.push(i + "");
        }
        return data;
      })();

      // 绘制图表
      myChart.setOption({
        //你的代码

        // backgroundColor: "#344b58",
        title: {
          // text: "16年1月-16年11月充值客单分析",
          subtext: "蔬菜肉类进货量",
          x: "4%",

          textStyle: {
            color: "#fff",
            fontSize: "22",
          },
          subtextStyle: {
            color: "#90979c",
            fontSize: "16",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          borderWidth: 0,
          top: 110,
          bottom: 95,
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          x: "4%",
          top: "11%",
          textStyle: {
            color: "#90979c",
          },
          data: ["蔬菜", "肉类", "总"],
        },

        calculable: true,
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#90979c",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            splitArea: {
              show: false,
            },
          },
        ],
        dataZoom: [
          {
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,
            start: 10,
            end: 80,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: [
          {
            name: "蔬菜",
            type: "bar",
            stack: "总量",
            barMaxWidth: 35,
            barGap: "10%",
            itemStyle: {
              normal: {
                color: "rgba(255,144,128,1)",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                  position: "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: [
              198.66, 330.81, 151.95, 160.12, 222.56, 229.05, 128.53, 250.91,
              224.47, 473.99, 126.85, 260.5,
            ],
          },

          {
            name: "肉类",
            type: "bar",
            stack: "总量",
            itemStyle: {
              normal: {
                color: "rgba(0,191,183,1)",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter: function (p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: [
              82.89, 67.54, 62.07, 59.43, 67.02, 67.09, 35.66, 71.78, 81.61,
              78.85, 79.12, 72.3,
            ],
          },
          {
            name: "总",
            type: "line",
            stack: "总量",
            symbolSize: 20,
            symbol: "circle",
            itemStyle: {
              normal: {
                color: "rgba(252,230,48,1)",
                barBorderRadius: 0,
                label: {
                  show: true,
                  position: "top",
                  formatter: function (p) {
                    return p.value > 0 ? p.value : "";
                  },
                },
              },
            },
            data: [
              281.55, 398.35, 214.02, 219.55, 289.57, 296.14, 164.18, 322.69,
              306.08, 552.84, 205.97, 332.79,
            ],
          },
        ],
      });
    },


    reduceTest(){
      

    }


  },
};
</script>

<style lang="less" scoped>
.el-col {
  height: 495px;
  color: white;
}
.kuang3 {
  
}
.p3oneContent {
  padding: 0px 30px 20px 70px;
  .p3onetitleTop {
    padding: 0 0 0 30px;
    color: white;
    font-size: 30px;
    background-image: url("@/assets/images/lshx2.png");
    // background-size: cover;
    background-repeat: no-repeat;
  }
  .p3onetitleTopDuan {
    padding: 0 0 0 30px;
    color: white;
    font-size: 30px;
    background-image: url("@/assets/images/top2.1.png");
    background-size: cover;
  }
  .p3onecontent2 {
    color: white;
    // position: relative;
  }
}

/deep/ .table-kuang {
  margin: 60px 0 0 15px;
  color: white;
}
/*最外层透明*/
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}
/* 删除表格下最底层的横线 */
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/deep/ .el-table thead {
  color: #ffffff;
  font-weight: 500;
  line-height: 60px;
}
.el-table {
  color: rgb(255, 255, 255);
}
.el-row{
  margin: 0;
  /deep/ .element.style{
    margin: 0px;
  }
}

</style>
